<template>
  <view class="flex-1 flex items-center rounded">
    <view class="flex-1 ">
      <u-input class="flex-1" v-model="value" :disabled="disabled" :placeholder="placeholder" type="text"
        :input-align="inputAlign" @click="openKeyboard" />
    </view>
    <view class="flex items-center">
      <u-icon name="/static/address/icon_ocr.png" size="36" class="ml-2" @click="openOcr('idcardOcr')"></u-icon>
      <u-icon name="/static/address/icon_nfc.png" size="36" class="ml-2" @click="openNfc('idcardNfc')"></u-icon>
    </view>
    <u-keyboard mode="card" class="" v-model="keyboardVisible" @change="keyboardChange" @backspace="keyboardBackspace" @confirm="keyboardConfirm">
      <view class="input-show flex justify-center">
        <u-input class="flex-1" v-model="keyboardValue" :disabled="true" :clearable="true" placeholder="" type="text"
        input-align="center"  />
      </view>
    </u-keyboard>
  </view>
</template>

<script>
import { androidNfc ,androidOcr } from '../../utils/androidUtil'
export default {
  name: "yer-idcard",
  props: {
    disabled: Boolean,
    defaultValue: "", //默认显示的字典，传字典的代码项
    inputAlign: {
      type: String,
      default: "left",
    }, //input内容对齐方式三种：left  center  right  默认left
    placeholder: {
      type: String,
      default: "请选择",
    }
  },
  emits: ["update:modelValue"],
  data() {
    return {
      keyboardValue: "", // 键盘上方展示的文字
      value: "", //字典展示的值，对应的是字典名称
      addressVisible: false, // 
      keyboardVisible: false, //
    }
  },
  methods: {
    clear() {
      this.value = "";
    },
    openOcr(zdbs){
      const _this = this
      androidOcr(zdbs,(res)=>{
        if(res.zdbs == zdbs){
          _this.gmsfhm = res.gmsfhm
          _this.$emit("update:gmsfhm", res.gmsfhm);
          _this.$emit("update:xm", res.xm);
        } 
      })
    },
    openNfc(zdbs){
      const _this = this
      androidNfc(zdbs,(res)=>{
        if(res.zdbs == zdbs){
          _this.value = res.gmsfhm
          _this.$emit("update:gmsfhm", res.gmsfhm);
          _this.$emit("update:xm", res.xm);
        }
      })
    },
    openKeyboard(){
      // 把已有的值带过来
      this.keyboardValue = this.value
      this.keyboardVisible = true
    },
    keyboardChange(e){
      // console.log(e);
      if(!this.keyboardValue){
        this.keyboardValue = ''
      }
      this.keyboardValue += e
    },
    keyboardBackspace(){
      this.keyboardValue = this.keyboardValue.substring(0,this.keyboardValue.length-1)
    },
    keyboardConfirm(){
      // console.log(123);
      this.value = this.keyboardValue
      this.$emit("update:modelValue", this.value);
      // 关闭就置空
      // this.keyboardValue = ''
    },
  },
  
  watch: {
    value: {
      immediate: false,
      handler: function (newVal, oldVal) {
        this.$emit("update:gmsfhm",  newVal);
        this.$emit("input",  newVal);
      },
    },
    defaultValue: {
      immediate: true,
      handler: function (newVal, oldVal) {
        // console.log("手机号",newVal);
        if (newVal == 0) {
          this.value =  newVal + "";
        } else {
          this.value = newVal;
        }
      },
    }
  },
};
</script>

<style scoped>
.flex-1{
  flex:1
}
.flex{
  display: flex;
}
.items-center{
  align-items: center
}
.justify-center{
  justify-content: center
}
.justify-between{
  justify-content: space-between;
}
.font-bold{
  font-weight: bold
}
.py-1\.5{
  padding: 12rpx 0;
}
.px-3{
  padding: 0 24rpx;
}
.mr-1{
  margin-right: 8rpx;
}
.ml-2{
  margin-left: 10rpx
}
.text-green-600{
  color: #059669 ;
}
.border-b{
  border-bottom-width: 1px;
}
.pb-3{
  padding-bottom: 24rpx;
}
.border{
  border-width: 1px;
  border-style: solid;
  border-color: rgb(209 213 219);
}
.rounded{
  border-radius: 8rpx;
}
.input-show{
  background: #F1F1F1;
  padding: 16rpx 24rpx;
}
</style>
